
<div id="wrapMain">
	<div id="innerMain">
    
    	<?php album_render_info($data['album']); ?>
    <br/>
    <Br/>
		<div class="row">
		<?php
		//POST RENDER GRID VIEW DATA
		$page = isset($_GET['page']) ? $_GET['page'] : 1;
		$max_page = $data['page'];
		post_render_grid($data['info'],'','',$page);
	
		?>
        <nav id="page-nav">
			<a href="index.php?module=ajax&act=ajax&case=5&t=load_more_items&page=<?= $page; ?>&id=<?php echo $_GET['id']?>"></a>
		</nav>
		
		<div class="loading" id="mainLoading"><div id="loadMoreItems" class="normalLoadBtn"><img width="20" src="public/images/loading.gif" alt="loading" /> Loading </div><div class="clr"></div></div>
		<div id="next-page"></div>
        
        
		</div><!-- end .row -->
	</div><!-- end innerMain -->
</div><!-- end wrapMain -->
		
<!-- end #wrapMain -->	

 <script>
  $(function(){
	  
	mw = getItemWidth();
		
    var max_page = '<?= $max_page ?>';
    var $container = $('#contentIndex');
    
    $container.imagesLoaded(function(){
    	 
      $container.masonry({
        itemSelector: '.item',
        columnWidth:mw,
		isFitWidth: true
      });
    });
    var nextSelector = '#page-nav a';
    var origNextUrl = $(nextSelector).attr('href');

    var pageRegex = /(page=)([0-9]+)/;
    var page  = origNextUrl.match(pageRegex)[2];
    var mypage = page;

    
    var loadedTime = 0;
    
    $container.infinitescroll({
	    navSelector  : '#page-nav',    // selector for the paged navigation 
	    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
	    itemSelector : '.item',     // selector for all items you'll retrieve
	        
	    path: function(pageNum) {
		    $('#mainLoading').show();
		    console.log('pageNum :' + pageNum);
		    console.log('myPage :' + mypage);

			if(pageNum > max_page){
				$('#mainLoading').hide();
				$('#next-page').append('<div class="normalLoadBtn">Hết dữ liệu</div>');
				return;
			}
		    
	        if(loadedTime != 1 && ((mypage + 1) % <?= LOAD_TIME ?> == 0) && mypage >= 1 ){
		        $('#mainLoading').hide();
				$('#next-page').append('<div class="normalLoadBtn"><a style="color: #fff" href="<?php  echo url_ajax(); ?>'+ pageNum +'"><i class=" icon-long-arrow-right"></i></a></div>');
				
	        }
	        
	        mypage++;
	        loadedTime++;
	        
	        return origNextUrl.replace( pageRegex, ("$1" + (mypage)));
        }
    },
      
      
      
      // trigger Masonry as a callback
      function( newElements ) {
    	$.each(newElements, function(e, index){
			//$(index).find(');
			attrHref = $(index).find('.hoverUnderline').attr('href');
			$(index).find('.hoverUnderline').attr('href', attrHref + '&pagerel=' + mypage);
			//alert(attrHref);
		});
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true );
          mw = getItemWidth();
		   $container.masonry({
             itemSelector: '.item',
             columnWidth:mw,
     		isFitWidth: true
           }); 
          $('#mainLoading').hide();
        });
      }
    );
    
	// Auto resize
	
  $(window).resize(function(){
	  mw = getItemWidth();
		$container.masonry( 'option', { columnWidth:mw });
	});
	// End of auto reisze
  });
</script>     